<template>
  <div class="main">
    <div class="card">
      <div class="info">
        <el-form ref="form" :model="form" label-width="80px" label-position="left">
          <el-form-item label="姓名" required>
            <el-input v-model="form.name" placeholder="请输入您的姓名"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" required>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.birth" style="width: 100%"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="邮箱" required>
            <el-input v-model="form.email" :disabled="true" placeholder="请输入您的邮箱"></el-input>
          </el-form-item>
          <el-form-item label="专业" required>
            <el-input v-model="form.major" placeholder="请输入您的专业"></el-input>
          </el-form-item>
        </el-form>
        <div class="btn">
          <el-button type="primary" @click="SavePersonalInfo" round>开始测评</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { InfoCollection } from "./../../api/access"

export default {
  name: "assbeginintroduce",
  data: function () {
    return {
      form: {
        uid: null,
        name: "",
        birth: "",
        email: "",
        sex: '男',
        major: "",
      },
    };
  },
  methods: {
    SavePersonalInfo: function () {
      console.log(this.form);
      InfoCollection(this.form)
        .then(res => {
          if (res.rescode = 200) {
            this.$message.success("将进入下一步");
            this.$emit("nextAss");
          }
        }).catch(err => {

        })
    }
  },
  mounted: function () {
    if (this.$store.state.User.haslogin == true) {
      this.form.name = this.$store.state.User.name;
      this.form.email = this.$store.state.User.email;
      this.form.sex = this.$store.state.User.sex;
      this.form.birth = this.$store.state.User.birth;
      this.form.major = this.$store.state.User.major;
      this.form.uid = this.$store.state.User.uid;
    }
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  margin: 0 auto;
}

.card {
  width: 60%;
  height: 90%;
  margin: 0 auto;
  margin-top: 20px;

  .info {
    width: 60%;
    margin: 0 auto;
    max-width: 400px;
    height: 80%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    position: relative;
    overflow: hidden;
    width: 768px;
    margin-bottom: 5%;
    padding: 10% 20%;
  }
}
</style>